<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>智慧工地大屏系统</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/head.css">
		<link rel="stylesheet" href="./css/index3.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<!-- header start -->
			<div class="header">
				<div class="time">
					<span id="time"></span>
				</div>
				<div class="login">
					用户1234234
				</div>
			</div>
			<!-- header end -->
			<!-- main start -->
			<div class="main clearfix w-m">
				<!-- 导航 -->				
				<div class="wrap clearfix">
					<div class="clearfix">
						<!-- 左边 -->
						<div class="leftDiv fl">
							<div class="box box1">
								<div class="title clearfix">
									<p>
										<img src="img/page3/tit4.png" alt="">
										运行实时数据
									</p>									
								</div>
								<div class="content clearfix">
									<div class="fl con1">
										<div class="item item1">
											<p>报警信息</p>
											<p id="baojing">3.00</p>
										</div>
										<div class="item item2">
											<p>倾斜预警值</p>
											<p id="qingxie">3.00</p>
										</div>
									</div>
									<div class="fl con2">
										<div class="item">
											<p id="zaizhong">89%</p>
											<p>今日载重百分比</p>
										</div>
									</div>
									<div class="fl con1">
										<div class="item item1">
											<p>电池电压</p>
											<p id="dianchi">3.00</p>
										</div>
										<div class="item item2">
											<p>继电器状态</p>
											<p id="jidianqi">3.00</p>
										</div>
									</div>
								</div>
								
							</div>
							<div class="box box2">
								<div class="title clearfix">
									<p>
										<img src="img/page3/tit5.png" alt="">
										信息统计
									</p>									
								</div>
								<div class="content">
									<div class="thead">
										<span class="s1">序号</span>
										<span class="s2">设备名称</span>
										<span class="s3">名称1</span>
										<span class="s4">名称2</span>
									</div>
									<div class="tbody">
										<ul class="scroll" id="infoList">
											<li>
												<span class="s1">1</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">2</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">3</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">4</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">5</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">6</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">7</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">8</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">9</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">10</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">11</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
											<li>
												<span class="s1">12</span>
												<span class="s2">3#升降机</span>
												<span class="s3">数据11</span>
												<span class="s4">数据2</span>
											</li>
										</ul>
									</div>
									
								</div>
							</div>
							
						</div>
						<!-- 右边 -->
						<div class="rightDiv fl clearfix">
							<div class="box box1">
								<div class="title clearfix">
									<p>
										<img src="img/page3/tit2.png" alt="">
										实时数据
									</p>									
								</div>
								<div class="content clearfix">
									<div class="filter">
										<span>设备名称</span>
										<select name="" id="filter">
											<option value="0">1#升降机</option>
											<option value="1">3#升降机</option>
										</select>
									</div>
									<div class="ta fl">
										<img src="img/page3/ta3-1.png" >
										<img src="img/page3/ta3-2.png" class="ta2">
									</div>
									<div class="data fl">
										<ul>
											<li class="clearfix">
												<div class="img fl">
													<img src="img/page3/icon3-1.png" >
												</div>
												<div class="txt fl">
													<p id="num">1.00</p>
													<p>升降机编号</p>
												</div>
											</li>
											<li class="clearfix">
												<div class="img fl">
													<img src="img/page3/icon3-2.png" >
												</div>
												<div class="txt fl">
													<p id="havent">1.00</p>
													<p>重量</p>
												</div>
											</li>
											<li class="clearfix">
												<div class="img fl">
													<img src="img/page3/icon3-3.png" >
												</div>
												<div class="txt fl">
													<p id="qingxiebi">1.00</p>
													<p>重量倾斜比例X</p>
												</div>
											</li>
											<li class="clearfix">
												<div class="img fl">
													<img src="img/page3/icon3-2.png" >
												</div>
												<div class="txt fl">
													<p id="kongzai">1.00</p>
													<p>重量空载实际值</p>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
							
							<div class="box box2">
								<div class="title clearfix">
									<p>
										<img src="img/page3/tit2.png" alt="">
										数据分析
									</p>									
								</div>
								<div style="width: 100%; height:500px" id="bar"></div>
							</div>
							<div class="box box3">
								<div class="title clearfix">
									<p>
										<img src="img/page3/tit3.png" alt="">
										统计分析
									</p>									
								</div>
								<div class="clearfix">
									<div class="filter fr">
										<span class="active">升降机1</span>
										<span>升降机2</span>
									</div>
								</div>
								<div id="line" style="width: 100%;height: 320px;"></div>	
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<!-- main end -->
		</div>
		
	</body>
</html>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/data3.js"></script>
<script type="text/javascript" src="js/index3.js"></script>
<script type="text/javascript">
	function setRem() {
	 let vW = window.innerWidth / 1920;
		let vH = window.innerHeight / 1080;
		document.getElementById('wrap').style.transform = "scale(" + vW + "," + vH + ")"
	}
	setRem();
	window.onresize = function() {
		setRem()
	};
	formDate('time')
	
	init(datas[0])
	
	$('#filter').change(function(){
		init(datas[$('#filter').val()])
	})

	$('.filter span').click(function(){
		$(this).addClass('active').siblings().removeClass('active')
		line(datas[$(this).index()].data5, 'line')
	})
	// 定时刷新
	setInterval(()=>{
		var index=parseInt( Math.random()*2)
		init(datas[index])
	},60*1000)
	
	
	
</script>
